<template>
    <div>
        <Card :students="stus" />
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer>
            <Add />
        </el-drawer>
    </div>
</template>
  
<script>
//1.引入组件
import Add from './components/Add.vue';
import Card from './components/Card.vue';

export default {
    name: 'Report',
    components: {
        //2.注册组件
        Card,
        Add
    },
    setup() {
        const sexList = [{ label: '男', value: '女', }, { label: '女', value: '女', },];
        const show = false;
        const stus = [
            { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
            { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
            { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', },
            // Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。
            // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
        ];
        const report = {};
        const form = { name: '', age: 0, sex: '', score: { yw: 0, sx: 0, yy: 0 }, avatar: './img/avatar' + Math.floor(Math.random() * 10) + '.png', };
        return {
            sexList,
            stus

        }
    }
}


</script>
  
<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
  